@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  body {
    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100;
  }
}

@layer components {
  .card {
    @apply rounded-xl border border-gray-500/10 bg-gray-500/5;
  }
  
  .status-indicator {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .status-running {
    @apply bg-green-500/10 text-green-500;
  }
  
  .status-stopped {
    @apply bg-red-500/10 text-red-500;
  }
  
  .status-warning {
    @apply bg-yellow-500/10 text-yellow-500;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}

/* Animations */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Process table styles */
.process-table {
  @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.process-table th {
  @apply px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider;
}

.process-table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100;
}

/* Port badge styles */
.port-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-300/10 text-blue-300;
}

/* Container type styles */
.docker-container {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-purple-400 bg-purple-400/10;
}

.host-container {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-500/10 text-gray-400;
}

.container-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}
